<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="../vue.js"></script>
</head>
<body>
<div id="app">

  <h1>{{msg}}</h1>
  <button @click="$forceUpdate()">强制更新</button>
  <button @click="update">修改数组的某一个值</button>
  <button @click="update1">程序员钻牛角尖更改第一个动漫的名字</button>
  <button @click="update2">对数组进行排序</button>
  <button @click="update3">使用不改变原数组的方法修改数组</button>


  <ul>
    <li v-for="item in anime">{{item}}</li>
  </ul>
</div>

<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el:'#app',
    data(){
      return{
        msg:'hello Vue~~~',
        anime:['新世纪福音战士','攻壳机动队','海贼王']
      }
    },
    methods:{
    //  由于数组的特性直接修改数组数据无法让视图更新，但是数据确实发生了变化
    //  vue自己封装了一个可以强制更新视图的方法$forceUpdate
      update(){
        // 更改数组中某个索引号对应的值
        this.anime[1] = '魔法禁书目录'
      //  由于JS规则，导致的vue中直接更改数组的值无法对视图刷新
      },
      update1(){
        this.anime[0] = '灼眼的夏娜'
        //咱们可以在数据更改之后的末尾，执行一次强制刷新,这种方法不可取。
        this.$forceUpdate()
      },
      update2(){
      //  vue帮我们把数组的常用的方法全部封装，可以让我们直接使用
        this.anime.sort()
      },
      update3(){
      //  通过过滤的方法筛选数组
        this.anime = this.anime.filter(item => {
          return item !== '海贼王'
        })
      }


    }
  })
</script>

</body>
</html>